<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="文章列表" name="first">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="标题:">
            <el-input v-model="formInline.input" placeholder="标题"></el-input>
          </el-form-item>
          <el-form-item label="媒体名称: ">
            <el-input v-model="formInline.input" placeholder="媒体名称"></el-input>
          </el-form-item>
          <el-form-item label="订单号:: ">
            <el-input v-model="formInline.input" placeholder="订单号"></el-input>
          </el-form-item>
          <el-form-item label="状态: ">
            <el-select v-model="formInline.value" placeholder="全部">
              <el-option
                v-for="item in formInline.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="起始时间:">
            <el-date-picker
              v-model="formInline.value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

        </el-form>

        <el-table
          :data="formInline.tableData"
          style="width: 100%"
          stripe
          border>
          <el-table-column
            label="订单号"
            width="180"
            prop="order"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="文章标题"
            width="180"
            header-align="center"
            align="center">
            <template slot-scope="scope">
               <span style="margin-left: 10px">{{ scope.row.title }}</span>
             </template>
          </el-table-column>
          <el-table-column
            label="发布网址"
            width="180"
            prop="releaseUrl"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="媒体名称"
            width="180"
            prop="media"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="客户"
            width="100"
            prop="customer"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="文章费用"
            width="100"
            prop="cost"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="发布状态"
            width="100"
            prop="state"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="提交时间"
            width="180"
            prop="submit_time"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="发布时间"
            width="180"
            prop="publish_time"
            header-align="center"
            align="center">
          </el-table-column>

          <el-table-column label="操作"width="380">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="代写列表" name="second">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="标题:">
            <el-input v-model="formInline.input" placeholder="标题"></el-input>
          </el-form-item>
          <el-form-item label="代写名称: ">
            <el-input v-model="formInline.input" placeholder="代写名称"></el-input>
          </el-form-item>
          <el-form-item label="订单号:: ">
            <el-input v-model="formInline.input" placeholder="订单号"></el-input>
          </el-form-item>
          <el-form-item label="起始时间:">
            <el-date-picker
              v-model="formInline.value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

        </el-form>

        <el-table
          :data="formInline.behalf"
          style="width: 100%"
          stripe
          border>
          <el-table-column
            label="订单号"
            width="180"
            prop="order"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="文章标题"
            width="180"
            header-align="center"
            align="center">
            <template slot-scope="scope">
               <span style="margin-left: 10px">{{ scope.row.title }}</span>
             </template>
          </el-table-column>
          <el-table-column
            label="代写名称	"
            width="180"
            prop="behalf_name"
            header-align="center"
            align="center">
          </el-table-column>

          <el-table-column
            label="文章费用"
            width="100"
            prop="cost"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="发布状态"
            width="100"
            prop="state"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="稿件链接"
            width="100"
            prop="url"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="修改意见"
            width="180"
            prop="idea"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="提交时间"
            width="180"
            prop="submit_time"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column label="操作"width="380">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="自媒体列表" name="third">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="标题:">
            <el-input v-model="formInline.input" placeholder="标题"></el-input>
          </el-form-item>
          <el-form-item label="自媒体名称: ">
            <el-input v-model="formInline.input" placeholder="代写名称"></el-input>
          </el-form-item>
          <el-form-item label="状态: ">
            <el-select v-model="formInline.value" placeholder="全部">
              <el-option
                v-for="item in formInline.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单号:: ">
            <el-input v-model="formInline.input" placeholder="订单号"></el-input>
          </el-form-item>
          <el-form-item label="起始时间:">
            <el-date-picker
              v-model="formInline.value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>

        </el-form>

        <el-table
          :data="formInline.tableData"
          style="width: 100%"
          stripe
          border>
          <el-table-column
            label="订单号"
            width="180"
            prop="order"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="文章标题"
            width="180"
            header-align="center"
            align="center">
            <template slot-scope="scope">
               <span style="margin-left: 10px">{{ scope.row.title }}</span>
             </template>
          </el-table-column>
          <el-table-column
            label="发布网址	"
            width="180"
            prop="url"
            header-align="center"
            align="center">
          </el-table-column>

          <el-table-column
            label="媒体名称"
            width="100"
            prop="media"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="平台名称"
            width="100"
            prop="media"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="客户"
            width="100"
            prop=""
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="文章费用"
            width="180"
            prop="cost"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="发布状态"
            width="100"
            prop="state"
            header-align="center"
            align="center">
          </el-table-column>

          <el-table-column
            label="提交时间"
            width="180"
            prop="submit_time"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            label="发布时间"
            width="180"
            prop="submit_time"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column label="操作"width="380">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        activeName: 'first',
        formInline:{
          options: [
            {
            value: '1',
            label: '未处理'
            }, {
              value: '2',
              label: '发布中'
            }, {
              value: '3',
              label: '已完成'
            }, {
              value: '4',
              label: '已拒稿'
            }, {
              value: '5',
              label: '已删除'
            },{
              value: '6',
              label: '退稿中'
            }
          ],
          value: '',
          tableData: [{
            order: '6032750182019082611372737	',
            title: '密茨侧帘车中国客户试用启动仪式',
            url:'www.baidu.com',
            releaseUrl:'查看网址',
            media:'中国网浪潮',
            customer:'王先森',
            cost:'+5.00',
            state:'发布中',
            submit_time:'2019-08-26 13:24:25',
            publish_time:'2019-08-26 13:24:25'
          },{
            order: '6032750182019082611372737	',
            title: '密茨侧帘车中国客户试用启动仪式',
            url:'www.baidu.com',
            releaseUrl:'查看网址',
            media:'中国网浪潮',
            customer:'王先森',
            cost:'+5.00',
            state:'发布中',
            submit_time:'2019-08-26 13:24:25',
            publish_time:'2019-08-26 13:24:25'
          },{
            order: '6032750182019082611372737	',
            title: '密茨侧帘车中国客户试用启动仪式',
            url:'www.baidu.com',
            releaseUrl:'查看网址',
            media:'中国网浪潮',
            customer:'王先森',
            cost:'+5.00',
            state:'发布中',
            submit_time:'2019-08-26 13:24:25',
            publish_time:'2019-08-26 13:24:25'
          },{
            order: '6032750182019082611372737	',
            title: '密茨侧帘车中国客户试用启动仪式',
            url:'www.baidu.com',
            releaseUrl:'查看网址',
            media:'中国网浪潮',
            customer:'王先森',
            cost:'+5.00',
            state:'发布中',
            submit_time:'2019-08-26 13:24:25',
            publish_time:'2019-08-26 13:24:25'
          }],
          behalf:[{
            order: '6032750182019152585215	',
            title: '阿斯达四大拉斯柯达萨迪克',
            url:'www.baidu.com',
            behalf_name:'代写一',
            cost:'+5.00',
            state:'发布中',
            idea:'关键字多一些',
            submit_time:'2019-08-26 13:24:25'
          }]
        }
      }
    },
    methods:{
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleEdit(index, row) {
       console.log(index, row);
      },
      handleDelete(index, row) {
         console.log(index, row);
      }
    }
  }
</script>
<style lang="scss" scoped>
  .el-form{
    padding: 18px;
  }
</style>
